<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/jsp/commons/taglibs.jsp"%>
<!-- 分页显示演示开始 -->
<style>
<!--
.tab {
	margin-bottom: 0px;
	margin-top: 6px;
}

.tab>li>a {
	line-height: 22px;
	padding-bottom: 2px;
	padding-top: 2px;
}

.tab-content {
	border: 1px solid #E3E3E3;
	border-radius: 0px 0px 4px 4px;
	border-top: none;
	padding: 2px;
}

.table [valign="top"] {
	vertical-align: top;
}

#single div[id^=m] {
	background-color: #FFFFFF;
	border: 1px solid #E3E3E3;
	border-radius: 4px;
	margin: 2px;
	padding: 2px;
	line-height: 25px;
	float: left;
	width: 45%;
	min-height: 225px;
}

#mNoGoods {
	max-height: 225px;
	display: block;
	overflow-y: auto;
}

#single div[id^=m] span {
	float: left;
}

.title {
	width: 60px;
	margin-left: 20px;
}

#memo {
	width: 99%;
}

tr td:FIRST-CHILD {
	text-align: right;
}

#goodsQr {
	min-height: 40px;
	width: 80%;
}

#qrCodeList {
	background-color: #FFFFFF;
	border: 1px solid #E3E3E3;
	border-radius: 4px;
	min-height: 400px;
	margin: 2px;
	padding: 15px;
	max-height: 600px;
}

div[name=box] {
	border: 1px solid;
	color: blue;
	padding: 15px;
	border-radius: 4px 4px 4px 4px;
}

input[readonly] {
	cursor: auto;
}
-->
</style>
<ul class="nav nav-tabs tab tBlock">
	<li class="active">
		<a deny="not" class="nFocus" href="#step" data-toggle="tab">
			<i class="icon-tags"></i>
			商品入库单
		</a>
	</li>
</ul>
<div class="tab-content">
	<div class="tab-pane active" id="step">
		<form id="inputForm" class="form-inline" action="${ctx}/adoms/storageBatch/save" method="post">
			<table id="step1" style="width: 80%; margin: auto;" class="table table-striped table-bordered table-condensed">
				<tr>
					<td class="span2">入库单编号:</td>
					<td>
						<input readonly="readonly" type="text" id="batchCode" name="batchCode">
					</td>
				</tr>
				<tr>
					<td class="span2">请选择商品:</td>
					<td>
						<select id="marchandise" name="marchandise.id" style="width: auto;">
							<c:forEach items="${mList }" var="m" varStatus="index">
								<option value="${m.id }">${index.index + 1}.${m.name }</option>
							</c:forEach>
						</select>
					</td>
				</tr>
				<tr>
					<td class="span2" valign="top">商品详情:</td>
					<td>
						<c:forEach items="${mList }" var="m" varStatus="index">
							<div class="hide" id="m${m.id }">
								<table class="table-bordered" style="width: 100%; background-color: #FFFFFF;">
									<tr>
										<td class="span2">商品名称：</td>
										<td>${index.index + 1}. ${m.name }</td>
									</tr>
									<tr>
										<td>商品编号：</td>
										<td>${m.code }</td>
									</tr>
									<tr>
										<td>单价：</td>
										<td>
											<span class="tBlue">
												<span>${m.price }</span>
												元
											</span>
										</td>
									</tr>
									<tr>
										<td>商品条码：</td>
										<td>${m.barCode }</td>
									</tr>
									<tr>
										<td>品牌：</td>
										<td>${m.brand.name }</td>
									</tr>
									<tr>
										<td>产地：</td>
										<td>${m.producePlace }</td>
									</tr>
									<tr>
										<td>保质期：</td>
										<td>${m.shelflife }月</td>
									</tr>
									<tr>
										<td>商品描述：</td>
										<td>${m.description }</td>
									</tr>
									<tr>
										<td>规格：</td>
										<td name="spcification">${m.spcification }</td>
									</tr>
									<tr>
										<td>包装：</td>
										<td id="mPackageing" to="#inputPackage">${m.packageing }</td>
									</tr>
									<tr>
										<td>每件数量：</td>
										<td>
											${m.numOfBox } ${m.packageing }
											<input type="hidden" name="mNumOfBox" value="${m.numOfBox }" />
										</td>
									</tr>
								</table>
							</div>
						</c:forEach>
					</td>
				</tr>
				<tr>
					<td>所属部门:</td>
					<td>
						<select id="department" name="department.id">
							<option value="${USER.department.id}">${USER.department.name}</option>
						</select>
					</td>
				</tr>
				<tr>
					<td>生产日期:</td>
					<td>
						<input id="produceDate" readonly="readonly" style="background-color: #FFFFFF; cursor: auto;" datepicker="datepicker" name="produceDate" type="text" size="30" maxlength="80" />
					</td>
				</tr>
				<tr>
					<td>录入数量:</td>
					<td>
						<input unit="#unit" type="text" id="numOfMarchandise" name="numOfMarchandise" value="0">
						<span id="inputPackage"></span>
					</td>
				</tr>
				<tr>
					<td>录入件数:</td>
					<td>
						<input style="background-color: gray;" id="numOfBox"  unit="#unit" type="text" name="numOfBox" value="0">
						件
					</td>
				</tr>
				<tr>
					<td style="text-align: center;" colspan="2">
						<input class="btn btn-primary span2" type="submit" value="提 交" />
					</td>
				</tr>
			</table>
		</form>
	</div>
</div>
<script>
	function init() {
		var d = new Date();
		var code = "B" + d.getTime();
		$("#batchCode").val(code);
	}
	$(function() {
		var mNumOfBox = 1;
		$("#inputForm").validate({
			rules : {
				"marchandise.id" : "required",
				"department.id" : "required",
				"produceDate" : "required",
				"numOfBox" : {
					required : true,
					number : true
				},
				"numOfMarchandise" : {
					required : true,
					digits : true
				}
			}
		});
		$("#numOfMarchandise").focus(function() {
			$(this).css("background","white")
			$("#numOfBox").css("background","gray");
		}).keyup(function() {
			var nums = $(this).val();
			$("#numOfBox").val((nums / mNumOfBox).toFixed(2));
		});
		$("#numOfBox").focus(function() {
			$(this).css("background","white")
			$("#numOfMarchandise").css("background","gray")
		}).keyup(function() {
			var nums = $(this).val();
			$("#numOfMarchandise").val((nums * mNumOfBox).toFixed(0));
		});
		$("#marchandise").change(function() {
			$("div[id^=m]:not([id^=mG])").hide();
			var mid = $(this).val();
			$("#m" + mid).show();
			mNumOfBox = parseInt($("[name=mNumOfBox]", $("#m" + mid)).val());
			$("#inputPackage").html($("[to=#inputPackage]", $("#m" + mid)).html());
		}).change();
		$("#inputForm").submit(function() {
			if (parseInt($.trim($("#numOfMarchandise").val())) < 1) {
				msgAlert.show("录入数量不正确！");
				return false;
			}
		});
		init();
	});
</script>
